<!DOCTYPE html>
<html ng-app="app" lang="en">
    <head>
        <meta charset="UTF-8">
        <title ng-bind="title"></title>
        <link rel="stylesheet" href="../../style/css/bootstrap.css">
        <link rel="stylesheet" href="../../style/css/matrix-style.css">
        <link rel="stylesheet" href="../loader/loader.css">
        <link rel="stylesheet" href="../tooltip/tooltip.css">
        <link rel="stylesheet" href="../checkbox/checkbox.css">
        <link rel="stylesheet" href="../pagination/pagination.css">
        <link rel="stylesheet" href="grid.css">
        <script src="../../../node_modules/angular/angular.js"></script>
        <script src="../../a.ui.js"></script>
        <script src="../common/store.js"></script>
        <script src="../common/position.js"></script>
        <script src="../common/stacked-map.js"></script>
        <script src="../checkbox/checkbox.js"></script>
        <script src="../tooltip/tooltip.js"></script>
        <script src="../pagination/pagination.js"></script>
        <script src="grid.js"></script>
        <script>
            // bootstrap app
            var app = angular.module('app', ['a.ui']);
            app.run(function ($rootScope, $filter) {
                $rootScope.title = 'Page Grid';
                $rootScope.searchParam = {};
                $rootScope.searchs = {};
                $rootScope.option = {
                    api     : 'page.demo.json',
                    checkbox: true,
                    column  : [{
                        text : '序号',
                        index: true
                    }, {
                        text : '姓名',
                        name : 'nickname',
                        ratio: 2
                    }, {
                        text: '性别',
                        name: 'sex'
                    }, {
                        text    : '关注时间',
                        name    : 'subscribeTime',
                        ratio   : 2,
                        renderer: function (row) {
                            return row.subscribeTime ? $filter('date')(row.subscribeTime, 'yyyy-MM-dd HH:mm:dd') : '';
                        }
                    }, {
                        text    : '状态',
                        name    : 'state',
                        renderer: function (row) {
                            return row.state == 1 ? '有效' : '无效';
                        }
                    }, {
                        text : '操作列',
                        items: [{
                            icon   : 'glyphicon-edit',
                            handler: function (o, row, rowIndex) {
                                console.log(o);
                                console.log(row);
                                console.log(rowIndex);
                            }
                        }, {
                            icon   : 'glyphicon-remove-circle',
                            tooltip: 'aasds',
                            handler: function (o, row, rowIndex) {
                                console.log(o);
                                console.log(row);
                                console.log(rowIndex);
                            }
                        }]
                    }]
                };
                $rootScope.getSelectRow = function () {
                    var rows = $rootScope.myGrid.getSelectRow();
                    console.log(rows);
                };
                $rootScope.reloadGrid = function () {
                    $rootScope.myGrid.reload();
                };
                $rootScope.search = function () {
                    $rootScope.searchs.userName = $rootScope.searchParam.name;
                };
            });
        </script>
    </head>
    <body>
        <div class="container">
            <h1 class="text-center" ng-bind="title"></h1>
            <p class="form-inline">
                <input type="text" class="form-control" ng-model="searchParam.name" placeholder="Search...">
                <button class="btn btn-default" ng-click="search()">Search</button>
                <button class="btn btn-default" ng-click="reloadGrid()">刷新</button>
                <button class="btn btn-default" ng-click="getSelectRow()">获取选中列</button>
            </p>
            <p>
                <label class="label label-info">count=false</label>
            </p>
            <div style="display:flex;width: 100%;height: 300px;">
                <a-page-grid style="display: flex;flex:auto;" option="option" params="searchs" name="myGrid" count="false"></a-page-grid>
            </div>
            <hr>
            <p>
                <label class="label label-info">count=true</label>
            </p>
            <div style="display:flex;width: 100%;height: 300px;">
                <a-page-grid style="display: flex;flex:auto;" option="option" params="searchs"></a-page-grid>
            </div>
        </div>
    </body>
</html>